<template>
 <div>
  <el-card style="margin: 20px 0">
   <CategorySelect @getCateList="getCateList" :isShowTable="!isShowTable"> </CategorySelect>
  </el-card>
  <el-card>
   <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="isShowTable = false">添加属性</el-button>
   <el-table v-show="isShowTable" border :data="List" style="width: 100%">
    <el-table-column label="序号" type="index" align="center" width="80px">
    </el-table-column>
    <el-table-column prop="attrName" label="属性名称">
    </el-table-column>
    <el-table-column prop="prop" label="属性值列表">
     <template slot-scope="{row,$index}">
      <div>
       <el-tag style="margin: 10px" type="success" v-for="(attr, index) in row.attrValueList" :key="attr.ud">
        {{ attr.valueName }}</el-tag>
      </div>
     </template>
    </el-table-column>
    <el-table-column prop="prop" label="操作" width="150px">
     <template slot-scope="{row,$index}">
      <div>
       <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateAttr(row)"></el-button>
       <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
      </div>
     </template>
    </el-table-column>
   </el-table>
   <div v-show="!isShowTable">
    <el-form :inline="true" ref="form" :model="attrTable" label-width="80px">
     <el-form-item label="属性名">
      <el-input placeholder="请输入属性名" v-model="attrTable.attrName" size="mini"></el-input>
     </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="!attrTable.attrName" @click="addAttrValue">
     添加属性值</el-button>
    <el-button size="mini">取消</el-button>
    <el-table :data="attrTable.attrValueList" style="width: 100%">
     <el-table-column label="序号" type="index" width="80">
     </el-table-column>
     <el-table-column prop="valueName" label="属性值名称">
      <template slot-scope="{row,$index}">
       <el-input v-model="row.valueName" :ref="$index" placeholder="请输入属性值名称" v-if="row.flag" @blur="toLook(row)"
        @keyup.native.enter="toLook(row)" size="mini"></el-input>
       <span v-else @click="toEidt(row, $index)" style="display:block">{{ row.valueName }}</span>
      </template>
     </el-table-column>
     <el-table-column prop="prop" label="操作">
      <template slot-scope="{row,$index}">
       <div>
        <el-popconfirm :title="`确定删除${row.valueName}?`" @onConfirm="deleteAttr($index)">
         <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini"></el-button>
        </el-popconfirm>
       </div>
      </template>
     </el-table-column>
    </el-table>
    <el-button type="primary" size="mini" @click="addOrUpdateAttr" :disabled="attrTable.attrValueList.length < 1">保存
    </el-button>
    <el-button @click="isShowTable = true" size="mini">取消</el-button>
   </div>
  </el-card>
 </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep';
export default {
 name: "Attr",
 props: {},
 components: {},
 data () {
  return {
   category1Id: "",
   category2Id: "",
   category3Id: "",
   List: [],
   isShowTable: true,
   attrTable: {
    attrName: '',// 属性名name
    attrValueList: [],
    categoryId: 0, // 三级联动 id
    categoryLevel: 3, //几级联动  默认三级
   }
   // {
   //   "attrName": "string",
   //   "attrValueList": [{
   //     "attrId": 0,
   //     "id": 0,
   //     "valueName": "string"
   //   }],
   //   "categoryId": 0,
   //   "categoryLevel": 0,
   //   "id": 0
   // }
  };
 },
 methods: {
  getCateList ({ categoryId, id }) {
   console.log(categoryId, id);
   if (id === 1) {
    this.category1Id = categoryId
    this.category2Id = ""
    this.category3Id = ""
   } else if (id === 2) {
    this.category2Id = categoryId
    this.category3Id = ""
   } else {
    this.category3Id = categoryId
    this.getList()
   }

  },
  async getList () {
   const result = await this.$API.attr.reqCategoryList(this.category1Id, this.category2Id, this.category3Id)
   if (result.code === 200) {
    this.List = result.data
   }
  },
  deleteAttr (index) {
   this.attrTable.attrValueList.splice(index, 1)
  },
  // 添加属性值
  addAttrValue () {
   this.attrTable.attrValueList.push({
    attrId: this.attrTable.id,
    valueName: '',
    flag: true
   })
   // 添加属性 也自动聚焦
   this.$nextTick(() => {
    this.$refs[this.attrTable.attrValueList.length - 1].focus()
   })
  },
  // 修改属性值
  updateAttr (row) {
   this.isShowTable = false

   // 直接赋值 导致 对象指针指向同一位置 
   // 因为该对象里面包裹这数组 对象 浅拷贝不能解决 需要深拷贝
   this.attrTable = cloneDeep(row)
   // 给每一项  添加falg属性 设置为true 但是 数据不是响应式的   需要用到 this.$set(对象,属性,值)
   //  this.attrTable.attrValueList.forEach(item=>{item.falg = true})
   this.attrTable.attrValueList.forEach(item => this.$set(item, 'flag', false))
  },
  toLook (row) {
   //判断 输入为空 不让保存
   // 如果输入的属性与之前的一致,则不能保存
   let depFlag = this.attrTable.attrValueList.some(item => {
    if (row !== item) {
     return row.valueName === item.valueName
    }
   })
   if (row.valueName.trim() === '' || depFlag) {
    this.$message('请输入合法值')
    return
   }
   row.flag = false
  },
  // 修改
  toEidt (row, index) {
   row.flag = true
   // 使用 v-if 新老dom 获取不到 使用nextTick
   this.$nextTick(() => {
    this.$refs[index].focus()
   })
  },
  // 保存
  async addOrUpdateAttr () {
   // 去除 valueName 值为空  去除 falg属性
   this.attrTable.attrValueList = this.attrTable.attrValueList.filter(item => {
    if (item.valueName !== '') {
     delete item.flag
     return true
    }
   })
   // 发送请求
   try {
    await this.$API.attr.reqAddOrUpdate(this.attrTable)
    this.$message({ type: 'success', message: "保存成功" })
    this.isShowTable = true
    this.getList()

   } catch (error) {
    this.$message({ type: 'error', message: '保存失败' })
   }
  }

 },
};
</script>

<style scoped lang="scss">
</style>
